<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="author" content="纪德朝">
    <title>百度新闻首页</title>
    <link rel="stylesheet" href="baidu.css">
    <style>

    </style>
</head>

<body>
    <section class="top">
        <div class="top-left">
            <li><a href="#">网页</a></li>
            <li><a href="#">新闻</a></li>
            <li><a href="#">贴吧</a></li>
            <li><a href="#">知道</a></li>
            <li><a href="#">音乐</a></li>
            <li><a href="#">图片</a></li>
            <li><a href="#">视频</a></li>
            <li><a href="#">地图</a></li>
            <li><a href="#">文库</a></li>
        </div>
        <div class="top-right">
            <li><a href="#">百度首页</a></li>
            <li><button>登录</button></li>
            <li><button>注册</button></li>
            <li><a href="#">百度新闻客户端</a></li>
        </div>
    </section>
    <section class="input">
        <li><img src="img/baidu.png" alt=""></li>
        <div class="xinwen">
            <li><input type="text" id="input"><button>百度一下</button></li>
            <div class="dan">
                <input type="radio" name="anniu">
                <p>新闻全文</p>
                <input type="radio" name="anniu">
                <p>新闻标题</p>
            </div>
        </div>
        <li><a href="#">帮助</a></li>
        <li><a href="#">高级搜素</a></li>
        <li><a href="#">设置</a></li>
    </section>
    <section class="nav">
        <ul id="nav-a">
            <li class="color"><a href="#">首页</a></li>
            <li><a href="#">百家号</a></li>
            <li><a href="#">国内</a></li>
            <li><a href="#">国际</a></li>
            <li><a href="#">军事</a></li>
            <li><a href="#">社会</a></li>
            <li><a href="#">财经</a></li>
            <li><a href="#">娱乐</a></li>
            <li><a href="#">体育</a></li>
            <li><a href="#">互联网</a></li>
            <li><a href="#">科技</a></li>
            <li><a href="#">游戏</a></li>
            <li><a href="#">时尚</a></li>
            <li><a href="#">女人</a></li>
            <li><a href="#">汽车</a></li>
            <li><a href="#">个性推荐</a></li>
            <li><a href="#">更多</a></li>
        </ul>
    </section>
    <main>
        <button>↑</button>
    </main>
</body>
<script>
    var li = document.querySelectorAll('.nav li');
    var nav = document.querySelector('#nav-a');
    var sec = document.querySelector('.nav');
    var main = document.querySelector('main');
    var btn = document.querySelector('main button');
    for (var i = 0; i < li.length; i++) {
        li[i].index = i;
        li[i].onmouseover = function (ev) {
            // console.log(this);
            for (var i = 0; i < li.length; i++) {
                li[i].className = '';
            }
            this.className = 'color';
        }
    }
    window.onscroll = function(){
        var scrollTop = document.scrollingElement.scrollTop;
        console.log(scrollTop);
        if(scrollTop>=100){
            // sec.style.width = '1200px';
            // sec.style.margin = '0px auto';
            sec.style.width = '100%';
            nav.style.width = '1200px';
            nav.style.margin = '0px auto';
            sec.style.position = 'fixed';
            sec.style.top = '0';
            btn.style.display = 'block';
        }else{
            sec.style = '';
            btn.style.display = 'none';
            
        }
    }
    btn.onclick = function(){
        document.scrollingElement.scrollTop = 0;
    }
</script>

</html>